<!--
 * @Author: your name
 * @Date: 2020-11-02 15:32:06
 * @LastEditTime: 2020-11-20 17:18:00
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \sende_nuxt\components\purchaseLens\prescriptionType.vue
-->
<template>
  <div class="PrescriptionType">
    <ul class="PrescriptionType_ul">
      <li class="li"
        v-for="(item, index) of configType"
        :key="'item' + index"
        @click="changeType(index)"
        :class="{active: currentIndex === index}">
        <h3 class="title mb10">{{$t(item.title)}}</h3>
        <p class="desc">{{$t(item.desc)}}</p>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    configType: {
      type: [Array, Object],
      default: () => []
    }
  },
  data() {
    return {
      currentIndex: 0
    }
  },
  methods: {
    changeType(index) {
      this.currentIndex = index;
      this.$emit('changeType', index);
    }
  }
};
</script>

<style lang="scss" scoped>
@import "~/assets/scss/index.scss";
.PrescriptionType {
  &_ul {
    @include flex(); 
    justify-content: space-between;
  }
  .li {
    @include flex-center(center);
    width: 284px;
    height: 154px;
    flex-direction: column;
    border: 2px solid $ddd;
    box-sizing: border-box;
    cursor: pointer;
    .title {
        font-size: 17px;
        font-weight: bold;
    }
    .desc {
        font-size: 14px;
        color: $c666;
    }
  }
}
.active {
  border: 2px solid $theme1 !important;
}
</style>